import React from 'react';
import { Table } from 'antd';
import type { TableProps } from 'antd';

// 定义 CustomTable 组件的属性
interface CustomTableProps {
    columns?: TableProps['columns'];     // 可选的自定义列配置
    dataSource: TableProps['dataSource']; // 表格的数据源
    pagination?: boolean | object;       // 支持传递 pagination 配置
    rowKey: string;                      // 行数据的唯一标识符，用来标识每一行
}

const CustomTable: React.FC<CustomTableProps> = ({
    columns,               // 外部传入的列配置
    dataSource,            // 表格的数据源
    pagination,     // 是否启用分页，默认为 true
    rowKey,                // 每行数据的唯一标识符
}) => {

    // 合并传入的列配置和默认列
    const finalColumns = columns || [];  // 如果传入了 columns 则使用传入的配置，否则使用默认配置

    // 如果 pagination 是一个对象或者为 true，我们使用默认的分页配置
    const paginationConfig = pagination === true ? {
        pageSize: 5,         // 默认每页显示 10 条
        showSizeChanger: true,  // 允许用户选择每页数据条数
        pageSizeOptions: ['5', '10', '20'], // 选择每页显示的数据条数
        showTotal: (total: number) => `共 ${total} 条记录`, // 显示总条数
    } : pagination;

    return (
        <Table
            columns={finalColumns}         // 使用最终的列配置
            dataSource={dataSource}        // 使用传入的数据源
            rowKey={rowKey}                // 指定每行数据的唯一标识符
            pagination={paginationConfig}  // 配置分页选项
        />
    );
};

export default CustomTable;
